<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考试成绩分段统计</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css">
    <style>
        .part {
            margin: 30px;
        }

        .box {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }

        .empty-tip {
            color: #888;
            font-size: 16px;
            text-align: center;
            margin-top: 30px;
        }
    </style>
</head>
<body>

<div class="part">
    <div id="chartBox" class="box"></div>
    <div id="emptyTip" class="empty-tip" style="display: none;">
        该门考试还没人参考哦，请提醒学生参加考试。
    </div>
</div>

<script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
    layui.use(['layer'], function(){
        var layer = layui.layer;
        var $ = layui.$;

        // 获取URL参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        const examCode = getQueryParam('examCode');
        if (!examCode) {
            layer.msg('缺少 examCode 参数！');
            return;
        }

        function loadExamScores() {
            axios.get('/scores/' + examCode).then(function(res) {
                if (res.data.code === 200) {
                    const scores = res.data.data;
                    if (!scores || scores.length === 0) {
                        document.getElementById('emptyTip').style.display = 'block';
                        return;
                    }
                    renderChart(scores);
                } else {
                    layer.msg('加载失败：' + res.data.message);
                }
            }).catch(function(error) {
                console.error('请求失败:', error);
                layer.msg('网络请求失败，请检查网络连接');
            });
        }

        function renderChart(scores) {
            // 分类统计
            let excellent = 0, good = 0, pass = 0, fail = 0;
            console.log(scores)
            scores.forEach(function(score) {
                let total = score.etScore || 0;
                if (total >= 90) {
                    excellent++;
                } else if (total >= 80) {
                    good++;
                } else if (total >= 60) {
                    pass++;
                } else {
                    fail++;
                }
            });

            const chartDom = document.getElementById('chartBox');
            const myChart = echarts.init(chartDom);

            const option = {
                title: {
                    text: '考试成绩分段统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}人 ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['优秀(90~100)', '良好(80~89)', '及格(60~79)', '不及格(<60)']
                },
                series: [
                    {
                        name: '成绩分布',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        data: [
                            {value: excellent, name: '优秀(90~100)'},
                            {value: good, name: '良好(80~89)'},
                            {value: pass, name: '及格(60~79)'},
                            {value: fail, name: '不及格(<60)'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        }

        $(document).ready(function() {
            loadExamScores();
        });
    });
</script>
</body>
</html>
